<template>
  <div class="work">
    <header-bar title="综合办公">
    </header-bar>
    <group gutter="0" class="group">
      <cell
        v-for="(cell, index) in cells"
        :key="index"
        :title="cell.title"
        is-link
        :link="cell.link"
        >
				<div class="title-wrapper" slot="title">
					<h3 slot="title" class="title">
						{{cell.title}}
            <badge class="badge"></badge>
        	</h3>
					
				</div>
        
        <div slot="icon" class="icon-wrapper">
          <icon :name="cell.icon" :scale="3"></icon>
        </div>
      </cell>
    </group>
    <transition name="slide">
      <router-view class="child-view">
      </router-view>
    </transition>
   
  </div>
</template>

<script>
  import {Group, Cell, Badge} from 'vux'
  import HeaderBar from '@/components/HeaderBar.vue'

  export default{
    components: {
      Group,
      Cell,
      Badge,
      HeaderBar
    },
    data(){
      return {
        cells: [
          {
            title: '个人待办',
            icon: "file",
            unReadCount: 9, //未读消息数量 
            link: {
              name: 'myTodos'
            }
          },
          {
            title: '部门待办',
            icon: "office",

            unReadCount: 9, //未读消息数量 
            link: {
              name: 'myTodos'
            }
          },
           {
            title: '个人已办',
            icon: "person_ok",
            unReadCount: 9, //未读消息数量 
            link: {
              name: 'myTodos'
            }
          },
          {
            title: '已办任务',
            icon: "office_ok",
            unReadCount: 9, //未读消息数量 
            link: {
              name: 'taskDone'
            }
          },
          {
            title: '收文查询',
            icon: "document",
            unReadCount: 9, //未读消息数量 
            link: {
              name: 'dispatches'
            }
          },
        ]
      }
      
    }
  }
</script>

<style lang="less" scoped>
  .group{
    .icon-wrapper{
      display: flex;
      align-items: center;
    }
		.title-wrapper{
			display: flex;
			.title{
        display: flex;
        align-items: center;
				position: relative;
				margin-left: 13px;
				font-size: 15px;
				font-weight: lighter;
				letter-spacing: 2px;
			}
      .badge{
        // flex-grow: 0;
        // flex-shrink: 0;
        position: absolute;
        top: -4px;
        right: -8px;
      }
		}
    
  }
  .child-view{
    position: fixed;
    top:0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .slide-enter-active, .slide-leave-active{
    transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  .slide-enter, .slide-leave-active{
    transform: translate3d(100%, 0, 0);
  }
</style>

